<template>
  <div>
    <van-search @input="clickHot" v-model="key" placeholder="请输入搜索关键词" />

    <!-- 热门搜索 -->
    <div v-if="key == ''" class="search_wrap">
      <div class="hot_title">热门搜索</div>
      <!-- 热搜词容器 -->
      <div class="hot_name_wrap">
        <!-- 热搜词 -->
        <span v-for="(item,index) in hotList" :key="index" @click="clickHot(item.first)" class="hot_item">{{ item.first }}</span>
      </div>
    </div>

    <!-- 最佳匹配 -->
    <div v-else class="search_wrap">
      <div class="hot_title">最佳匹配</div>

      <van-cell-group>

        <music-cell 
          v-for="item in searchList" 
          :key="item.id" 
          :title="item.name" 
          :id="item.id"
          :label="`${item.artists[0].name} - ${item.name}`"
        />
        <!-- <van-cell v-for="item in searchList" :key="item.id" :title="item.name" :label="`${item.artists[0].name} - ${item.name}`">
          <template #right-icon>
            <div style="display:flex; align-items:center;">
              <van-icon size="24" name="play-circle-o" />
            </div>
          </template>
        </van-cell> -->

      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { hotWords, search } from '@/api/search'
export default {
  data() {
    return {
      // 跟搜索框双向绑定
      key: "",
      hotList: [],
      searchList: []
    };
  },

  methods: {

    async clickHot (name) {
      
      // 如果为空没必要往下执行调用接口
      if (name == '') return
      
      // 显示到搜索框
      this.key = name

      // 发请求搜索歌曲
      const res = await search({
        keywords: name
      })
      this.searchList = res.data.result.songs
    }
  },

  async created () {
    const res = await hotWords()
    this.hotList = res.data.result.hots
  },

};
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
  padding: 10px;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 12px;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 10px 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 35px;
  margin-right: 20px;
  margin-bottom: 15px;
  padding: 0px 10px;
  font-size: 16px;
  line-height: 35px;
  color: #333;
  border-color: #d3d4da;
  border-radius: 20px;
  border: 1px solid #d3d4da;
}
</style>